<template>
  <div class="container">
    <div class="total">
      <div class="item" @click="details(1)">
        <div class="name">消费总金额</div>
        <div class="money">{{ Expense ? Expense : 0 }}</div>
      </div>
      <div class="item" @click="details(2)">
        <div class="name">年消费金额</div>
        <div class="money">{{ yearExpense ? yearExpense : 0 }}</div>
      </div>
      <div class="item" @click="details(3)">
        <div class="name">月消费金额</div>
        <div class="money">{{ monExpense ? monExpense : 0 }}</div>
      </div>
      <div class="item" @click="details(4)">
        <div class="name">今天消费金额</div>
        <div class="money">{{ dayExpense ? dayExpense : 0 }}</div>
      </div>
    </div>
    <p class="row" @click="goDetails">查看消费详情</p>
    <div class="EchartsBox">
      <div ref="dayEcharts" class="dayEcharts"></div>
      <div ref="monEcharts" class="dayEcharts"></div>
    </div>
    <div v-show="Visible" class="detailBox" @click="closefun($event)">
      <div ref="detailEcharts" class="detailEcharts"></div>
    </div>
  </div>
</template>

<script>
import { toRefs, onMounted } from "vue";
import expenseListJS from "./expenseList.js";
export default {
  name: "",
  setup() {
    let {status,methodFun:{
      getExpense,
      goDetails,
      closefun,
      details,
    }} = expenseListJS();

    let {
      Visible,
      dayEcharts,
      monEcharts,
      detailEcharts,
      Expense,
      yearExpense,
      monExpense,
      dayExpense,
    } = toRefs(status);

    onMounted(() => {
      getExpense();
    });
    return {
      closefun,
      getExpense,
      Expense,
      yearExpense,
      monExpense,
      dayExpense,
      dayEcharts,
      monEcharts,
      detailEcharts,
      Visible,
      details,
      goDetails,
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .row {
    text-align: center;
    line-height: 40px;
    color: pink;
    font-size: 20px;
    font-family: "kaiti";
    cursor: pointer;
  }
  .detailBox {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    box-sizing: border-box;
    padding-top: 160px;
    background-color: transparent;
    .detailEcharts {
      width: 800px;
      height: 540px;
      background-color: #d9d9d9;
      margin: 0px auto;
      border-radius: 30px;
      box-shadow: 0px 0px 20px 2px red;
    }
  }
  .total {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    .item {
      display: flex;
      flex: 1;
      height: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0px 10px;
      border-right: 1px solid rgba(255, 106, 106, 0.5);
      &:hover {
        box-shadow: 0px 0px 30px red;
        border-radius: 20px;
        color: white;
        text-shadow: 1px 1px 1px red;
      }
      .name {
        font-size: 20px;
        margin-bottom: 20px;
      }
      .money {
      }
    }
  }
  .EchartsBox {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .dayEcharts {
      width: 40%;
      height: 60%;
      background-color: rgba(152, 245, 255, 0.4);
    }
  }
}
</style>
